<template>
  <el-layout class="order-detail-layout">
    <el-main class="order-detail-content">
      <el-card
        class="order-detail-card"
        :title="order.title || '用户未设置'"
        v-if="order"
      >
        <!-- 标题和状态 -->
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="订单标题">
              <el-input
                v-model="order.title"
                disabled
                placeholder="用户未设置"
                :class="{ 'missing-field': !order.title }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="statusColor(order.status)">
                <i :class="statusIcon(order.status)"></i>
                {{ statusText(order.status) }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 预算范围和紧急程度 -->
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="预算范围">
              <span
                v-if="order.budget_min !== null && order.budget_max !== null"
              >
                {{ order.budget_min }} - {{ order.budget_max }} 元
              </span>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急程度">
              <el-tag v-if="order.urgency_degree !== null" type="warning">
                {{ urgencyLevel(order.urgency_degree) }}
              </el-tag>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 其他字段 -->
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="需求">
              <el-input
                v-model="order.an_require"
                disabled
                placeholder="用户未设置"
                :class="{ 'missing-field': !order.an_require }"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="背景">
              <el-input
                v-model="order.background"
                disabled
                placeholder="用户未设置"
                :class="{ 'missing-field': !order.background }"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="其他">
              <el-input
                v-model="order.other"
                disabled
                placeholder="用户未设置"
                :class="{ 'missing-field': !order.other }"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 附件下载按钮 -->
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="附件">
              <el-button
                type="text"
                @click="downloadAttachment(order.attach)"
                v-if="order.attach"
                >下载附件</el-button
              >
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 用标签展示的分类字段 -->
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="业务类型">
              <span v-if="order.buss_type">{{ order.buss_type }}</span>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型">
              <span v-if="order.item_type">{{ order.item_type }}</span>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 显示时间字段 -->
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span v-if="order.created_at">{{
                formatDate(order.created_at)
              }}</span>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间">
              <span v-if="order.updated_at">{{
                formatDate(order.updated_at)
              }}</span>
              <span v-else class="missing-field">用户未设置</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </el-layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { findCusOrderByID } from "@/api/order";

const props = defineProps({ orderId: Number });
const router = useRouter();
const order = ref({});

const getDetails = async () => {
  const res = await findCusOrderByID(props.orderId);
  order.value = res?.data || {};
};

onMounted(() => getDetails());

const statusColor = (status) =>
  ["blue", "red", "green", "teal", "purple", "yellow"][status - 1] || "gray";
const statusIcon = (status) =>
  [
    "el-icon-time",
    "el-icon-close",
    "el-icon-check",
    "el-icon-s-unfold",
    "el-icon-star-on",
    "el-icon-warning",
  ][status - 1] || "el-icon-question";
const statusText = (status) =>
  ["提交未审核", "审核失败", "审核成功", "匹配成功", "订单完成", "售后中"][
    status - 1
  ] || "未知状态";
const urgencyLevel = (degree) =>
  ["一般(两周)", "急(一周)", "紧急(48h)", "加急(24h)", "特急(12h)"][
    degree - 1
  ] || "未知";
const formatDate = (timestamp) =>
  new Date(timestamp * 1000).toLocaleDateString("zh-CN");
const downloadAttachment = (attach) =>
  attach
    ? window.open(import.meta.env.VITE_BASE_API + attach, "_blank")
    : alert("暂无附件可下载");
</script>

<style scoped>
.order-detail-layout {
  background-color: #f5f7fa;
  padding: 20px;
}

.order-detail-content {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-detail-card {
  border-radius: 8px;
}

.missing-field {
  color: red;
  font-weight: bold;
}

.el-form-item label {
  font-weight: bold;
}

.el-button {
  margin-top: 16px;
}
</style>
